<template>
  <div class="screen">
    <img src="../../assets/bg.jpg" alt="" />
    <div class="scale-box" :style="{ transform: 'translate(-50%, 0) scale(' + scale + ')' }">
      <div class="header">
        <div class="date-time">
          <p>
            <span>{{ DateString }}</span>
            <span style="margin-left: 20px;">{{ weekString }}</span>
            <span style="margin-left: 10px;">{{ timeString }}</span>
          </p>
        </div>
        <div class="header-title">
          <h2 class="header-logo">上饶市铅山县恒平劳务人力资源网</h2>
        </div>
        <div class="btn-screen" @click="foFullScreen">{{ fullScreen }}</div>
      </div>
      <div class="main_box">
        <div class="top_block">
          <div class="count_item">
            <div class="name">企业总数量 (家)</div>
            <div class="count">{{ totalCompanyCount }}</div>
          </div>
          <div class="count_item">
            <div class="name">岗位总数量 (个)</div>
            <div class="count">{{ jobCount }}</div>
          </div>
          <div class="count_item">
            <div class="name">简历总数量 (份)</div>
            <div class="count">{{ workerNum }}</div>
          </div>
          <div class="count_item">
            <div class="name">求职中人数 (人)</div>
            <div class="count">{{ findJobNum }}</div>
          </div>
        </div>
        <div class="under_block">
          <div class="item left_block job_list">
            <div class="title">最新岗位</div>
            <div class="diy-table-header">
              <div class="table-header-item">岗位名称</div>
              <div class="table-header-item">企业编号</div>
              <div class="table-header-item">企业名称</div>
              <div class="table-header-item">薪酬</div>
            </div>
            <div class="diy-table">
              <vue-seamless-scroll
                :data="jobList"
                class="seamless-warp"
                :class-option="classOption"
              >
                <div>
                  <div class="DataList_top" v-for="(item, index) in jobList" :key="index">
                    <div class="DataList_left">{{ item.name }}</div>
                    <div class="DataList_left">{{ item.code }}</div>
                    <div class="DataList_left">{{ item.outerName }}</div>
                    <div class="DataList_left">{{ item.salary }}</div>
                  </div>
                </div>
              </vue-seamless-scroll>
            </div>
          </div>
          <div class="item right_block company_list">
            <div class="title">推荐企业</div>
            <div class="diy-table">
              <vue-seamless-scroll
                v-if="companyList && companyList.length > 0"
                :data="companyList"
                class="seamless-warp"
                :class-option="classOptionCompany"
              >
                <div class="company-item" v-for="item in companyList" :key="item.id">
                  <div class="company-name">{{ item.name }}</div>
                  <div class="company-pic clearfix" v-if="item.urls && item.urls.length > 0">
                    <img
                      v-for="elem in item.urls"
                      :key="elem.id"
                      class="fl"
                      :src="elem.url"
                      alt=""
                    />
                  </div>
                  <div class="company-desc">{{ item.detail }}</div>
                </div>
              </vue-seamless-scroll>
            </div>
            <div class="more-company-info clearfix">
              <div class="word fl">更多企业、岗位请扫码查看</div>
              <img class="fl" src="../../assets/code.png" alt="" />
              <div class="name fr">
                <div class="item-name">铅山县恒平劳务有限公司</div>
                <div class="item-name">联系电话：{{ contactPhone }}</div>
              </div>
            </div>
          </div>
        </div>
      </div>
    </div>
  </div>
</template>

<script>
import vueSeamlessScroll from 'vue-seamless-scroll'
import ReconnectingWebSocket from '@/utils/reconnecting-websocket.js'
export default {
  data() {
    return {
      lockReconnect: false,
      tt: '',
      ws: '',
      width: 1920,
      height: 1080,
      ww: 1,
      wh: 1,
      scale: 1,
      DateString: '',
      weekString: '',
      timeString: '',
      path: 'wss://api.zghprlzy.com/data-center-screen',
      socket: '',
      totalCompanyCount: 0,
      jobCount: 0,
      workerNum: 0,
      findJobNum: 0,
      jobList: [],
      companyList: [],
      isFullScreen: false,
      timeoutObj: null,
      serverTimeoutObj: null
    }
  },
  computed: {
    contactPhone() {
      return this.$config.contactPhone
    },
    classOption() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: this.jobList ? this.jobList.length : 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    classOptionCompany() {
      return {
        step: 0.4, // 数值越大速度滚动越快
        limitMoveNum: this.companyList ? this.companyList.length : 2, // 开始无缝滚动的数据量 this.dataList.length
        hoverStop: true, // 是否开启鼠标悬停stop
        direction: 1, // 0向下 1向上 2向左 3向右
        openWatch: true, // 开启数据实时监控刷新dom
        singleHeight: 0, // 单步运动停止的高度(默认值0是无缝不停止的滚动) direction => 0/1
        singleWidth: 0, // 单步运动停止的宽度(默认值0是无缝不停止的滚动) direction => 2/3
        waitTime: 1000 // 单步运动停止的时间(默认值1000ms)
      }
    },
    fullScreen() {
      return !this.isFullScreen ? '全屏' : '退出全屏'
    }
  },
  mounted() {
    const self = this
    self.ww = window.innerWidth / self.width
    self.scale = self.ww
    window.onresize = function() {
      self.ww = window.innerWidth / self.width
      self.scale = self.ww
    }
    self.getCurTime()
    self.init()
  },
  components: {
    vueSeamlessScroll
  },
  methods: {
    getCurTime() {
      this.getTime()
      setInterval(() => {
        this.getTime()
      }, 60000)
    },
    getTime() {
      const date = new Date()
      const Month = date.getMonth() < 9 ? '0' + (date.getMonth() + 1) : date.getMonth() + 1
      const day = date.getDate() < 10 ? '0' + date.getDate() : date.getDate()
      this.DateString = date.getFullYear() + '年' + Month + '月' + day + '日'

      const week = date.getDay()
      switch (week) {
        case 0:
          this.weekString = '周日'
          break
        case 1:
          this.weekString = '周一'
          break
        case 2:
          this.weekString = '周二'
          break
        case 3:
          this.weekString = '周三'
          break
        case 4:
          this.weekString = '周四'
          break
        case 5:
          this.weekString = '周五'
          break
        case 6:
          this.weekString = '周六'
      }
      const hours = date.getHours() < 10 ? '0' + date.getHours() : date.getHours()
      const minutes = date.getMinutes() < 10 ? '0' + date.getMinutes() : date.getMinutes()
      this.timeString = hours + ':' + minutes
    },
    init() {
      if (typeof WebSocket === 'undefined') {
        alert('您的浏览器不支持socket')
      } else {
        // 实例化socket
        this.socket = new ReconnectingWebSocket(this.path)
        // 监听socket连接
        this.socket.onopen = this.open
        // 监听socket错误信息
        this.socket.onerror = this.error
        // 监听socket消息
        this.socket.onmessage = this.getMessagen
      }
    },
    open() {
      console.log('socket连接成功')
    },
    error() {
      console.log('连接错误')
    },
    close() {
      console.log('连接关闭')
    },
    getMessagen(msg) {
      if (msg.data) {
        let result = msg.data ? JSON.parse(msg.data) : {}
        this.totalCompanyCount = result.companyNum
        this.jobCount = result.jobNum
        this.workerNum = result.workerNum
        this.findJobNum = result.findJobNum
        this.companyList = result.companies
        this.jobList = result.jobs
      }
    },
    // send(params) {
    //   this.socket.send(params)
    // },
    foFullScreen() {
      if (!this.isFullScreen) {
        const el = document.documentElement
        const rfs =
          el.requestFullScreen ||
          el.webkitRequestFullScreen ||
          el.mozRequestFullScreen ||
          el.msRequestFullScreen
        this.isFullScreen = !this.isFullScreen
        if (rfs) {
          rfs.call(el)
        } else if (typeof window.ActiveXObject !== 'undefined') {
          //for IE，这里其实就是模拟了按下键盘的F11，使浏览器全屏
          const wscript = new ActiveXObject('WScript.Shell')
          if (wscript != null) {
            wscript.SendKeys('{F11}')
          }
        }
      } else {
        const el = document
        const cfs =
          el.cancelFullScreen ||
          el.webkitCancelFullScreen ||
          el.mozCancelFullScreen ||
          el.exitFullScreen

        this.isFullScreen = !this.isFullScreen
        //typeof cfs != "undefined" && cfs
        if (cfs) {
          cfs.call(el)
        } else if (typeof window.ActiveXObject !== 'undefined') {
          //for IE，这里和fullScreen相同，模拟按下F11键退出全屏
          const wscript = new ActiveXObject('WScript.Shell')
          if (wscript != null) {
            wscript.SendKeys('{F11}')
          }
        }
      }
    }
  }
}
</script>

<style lang="less">
.screen {
  width: 100vw;
  height: 100vh;
  font-family: Avenir, Helvetica, Arial, sans-serif;
  -webkit-font-smoothing: antialiased;
  -moz-osx-font-smoothing: grayscale;
  text-align: center;
  color: #2c3e50;
  position: relative;
  overflow: hidden;
  .scale-box {
    width: 1920px;
    height: 1080px;
    transform-origin: 50% 0;
    position: absolute;
    left: 50%;
    top: 0;
    transition: 0.2s;
    z-index: 10;
    .header {
      width: 100%;
      height: 100px;
      background: url('../../assets/nav_bg.svg') repeat center;
      background-size: 100%;
      position: relative;
      z-index: 1;
      .btn-screen {
        width: 80px;
        height: 28px;
        line-height: 30px;
        font-size: 14px;
        color: #adc2f4;
        text-align: center;
        cursor: pointer;
        background: url('../../assets/nav_tab.svg') no-repeat center;
        background-size: 100%;
        position: absolute;
        top: 18px;
        right: 40px;
        z-index: 2;
      }
      .header-title {
        width: 100%;
        height: 100px;
        position: absolute;
        top: 0;
        left: 50%;
        transform: translateX(-50%);
        z-index: 0;
        .header-logo {
          font-size: 36px;
          color: #fff;
          margin-top: 18px;
          font-weight: bold;
        }
        .header-sub-title {
          font-size: 16px;
          color: #50d5ff;
          height: 30px;
          line-height: 30px;
          text-align: center;
        }
      }
      .date-time {
        height: 24px;
        line-height: 24px;
        font-size: 18px;
        color: #adc2f4;
        position: absolute;
        top: 12px;
        left: 40px;
      }
    }
    .main_box {
      padding: 0 60px 40px 60px;
      overflow: hidden;
      width: 100%;
      height: calc(100vh - 110px);
      // display: flex;
      // display: -webkit-flex;
      // flex-direction: column;
      // justify-content: center;
      // box-sizing: border-box;
      z-index: 0;
      .top_block {
        width: 100%;
        height: 110px;
        display: flex;
        display: -webkit-flex;
        flex-direction: row;
        justify-content: space-between;
        position: relative;
        font-size: 16px;
        color: #ffffff;
        letter-spacing: 0;
        text-align: center;
        margin: 30px 0;
        .count_item {
          position: relative;
          width: 350px;
          height: 110px;
          background: #1a2f7a;
          display: flex;
          flex-direction: column;
          justify-content: center;
          .name {
            width: 100%;
            font-size: 20px;
            margin-bottom: 5px;
          }
          .count {
            font-size: 26px;
            font-weight: bold;
            color: #50e2fd;
            letter-spacing: 0;
            text-align: center;
            text-shadow: 0 2px 14px rgb(0 44 110 / 73%);
          }
        }
      }
      .under_block {
        width: 100%;
        height: calc(100vh - 310px);
        display: flex;
        flex-direction: row;
        justify-content: space-between;
        flex-grow: 1;
        overflow: hidden;
        .item {
          .title {
            width: 100%;
            height: 60px;
            line-height: 60px;
            font-size: 24px;
            color: rgb(235, 236, 251);
            font-weight: bold;
            text-align: left;
            background: #1f2c6a;
            text-indent: 20px;
          }
        }
        .left_block {
          width: 49%;
          .diy-table-header {
            background: #4262e6;
            display: flex;
            flex-direction: row;
            .table-header-item {
              width: 25%;
              height: 60px;
              line-height: 60px;
              color: #fff;
              font-size: 20px;
              font-weight: bold;
            }
          }
          .diy-table {
            // height: calc(100vh - 440px);
            overflow: hidden;
            .seamless-warp {
              .DataList_top {
                height: 56px;
                line-height: 56px;
                display: flex;
                flex-direction: row;
                .DataList_left {
                  font-size: 16px;
                  color: #fff;
                  width: 25%;
                  height: 56px;
                  overflow: hidden;
                  white-space: nowrap;
                  text-overflow: ellipsis;
                }
              }
              .DataList_top:nth-child(odd) {
                background: #192d72;
              }
              .DataList_top:nth-child(even) {
                background: #22399a;
              }
            }
          }
        }
        .right_block {
          width: 49%;
          position: relative;
          .diy-table {
            height: calc(100vh - 500px);
            overflow: hidden;
            .company-item {
              padding: 15px 20px;
              margin: 5px 0;
              .company-name {
                color: #fff;
                font-size: 20px;
                text-align: left;
                height: 30px;
                line-height: 30px;
                font-weight: bold;
                margin-bottom: 15px;
              }
              .company-pic {
                height: 90px;
                overflow: hidden;
                margin-bottom: 15px;
                img {
                  // width: 120px;
                  height: 90px;
                  margin-right: 5px;
                }
              }
              .company-desc {
                // max-height: 100px;
                font-size: 16px;
                color: #fff;
                letter-spacing: 1px;
                line-height: 25px;
                text-align: justify;
                overflow: hidden;
              }
            }
            .company-item:nth-child(odd) {
              background: #192d72;
            }
            .company-item:nth-child(even) {
              background: #1e3287;
            }
          }
          .more-company-info {
            width: 100%;
            height: 120px;
            padding: 10px 20px;
            background: #1f2c6a;
            color: #fff;
            position: absolute;
            bottom: 0;
            .word {
              font-size: 24px;
              font-weight: bold;
              line-height: 100px;
            }
            img {
              width: 100px;
              height: 100px;
              margin-left: 30px;
            }
            .name {
              font-size: 20px;
              height: 100px;
              display: flex;
              flex-direction: column;
              justify-content: center;
            }
          }
        }
      }
    }
  }
}
</style>
